<script>
import {defineComponent} from 'vue'
import authPage from "@/utils/pages/authPage";
import actApi from "@/utils/api/actApi";
import ActTitle from "@/views/act/components/ActTitle.vue";
import ActCats from "@/views/act/components/ActCats.vue";
import ActPlaceSize from "@/views/act/components/ActPlaceSize.vue";
import ActTime from "@/views/act/components/ActTime.vue";
import {showLoadingToast, showSuccessToast} from "vant";
import actPage from "@/utils/pages/actPage";
import ActInfoHead from "@/views/act/components/ActInfoHead.vue";
import ShowImg from "@/components/ShowImg.vue";

export default defineComponent({
  name: "Sign",
  components: {ShowImg, ActInfoHead, ActTime, ActPlaceSize, ActCats, ActTitle},
  created() {
    let actId = this.$route.query.actId
    if(actId){
      this.initAct(actId)
    }else {
      authPage.status(-3).open().replace()
    }
    
  },
  data(){
    return {
      act: null,
      user: null
    }
  },
  methods: {
    gotoActInfo(){
      this.$router.push({
        path: '/act/info',
        query: {actId: this.act.actId}
      })
    },
    async initAct(actId){
      let {act,user} = await actApi.getSimpleActInfo(actId)
      this.user = user
      this.act = act
      
    },
    async signAct(){
      try {
        showLoadingToast({
          message: '签到中...',
          forbidClick: true,
          duration: 0
        });
        
        await actApi.signAct(this.act.actId)
        showSuccessToast('签到成功')
        setTimeout(()=>{
          this.$router.replace({
            path: '/act/info',
            query: {actId: this.act.actId}
          })
        },200)
      }catch (data){
      
      }finally {
      
      }
    }
  }
})
</script>

<template>
  <div style="margin: 10px" v-if="act===null">
    <van-skeleton title avatar :row="3" />
  </div>
  <div v-else>
    <div class="act-info-container-div">
      <ActInfoHead
        :user="user"
        :act="act"
        />
      <ActTitle
          :title="act.title"
          @click="gotoActInfo"
      />
      <ActCats
          :cats="act.cats"
      />
      <div>
        <van-text-ellipsis
            rows="8"
            :content="act.info"
            expand-text="展开"
            collapse-text="收起"
        />
      </div>
      
      <ActTime
          :time1="act.startTime"
          :time2="act.endTime"
      />
      <ActPlaceSize
          :place="act.place"
          :size="act.size"
          :apply-num="act.applyNum"
      />
      
      <ShowImg :img-list="act.imgs"/>
    </div>
    <van-button round type="primary" plain size="large" @click="signAct">确认签到</van-button>
  </div>
</template>

<style scoped lang="less">
.act-info-container-div{
  display: flex;
  flex-direction: column;
  margin: 10px 10px;
  >div{
    margin-bottom: 8px;
  }
}
</style>